<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js"></script>
		<style type="text/css">
			#main {
				width: 445px;
				border: 1px solid;
				position: relative;
			}
			
			#tu {
				width: 48px;
				height: 100px;
				/*border: 1px solid;*/
				position: absolute;
				bottom: 0px;
				right: 0px;
			}
			
			#text {
				width: 400px;
				height: 100px;
				border: 1px solid;
			}
			
			.sup,
			.sub {
				color: red;
				padding: 6px;
				cursor: pointer;
				font-weight: bold;
			}
			.cl{
				color: blue;
			}
		</style>
	</head>
	<script type="text/javascript">
		/*$(function() {
			$("#sup").click(function() {
				$(".sup").toggleClass("cl");
				insertHtmlAtCaret("<sup>1</sup>");
			})
			$("#sub").click(function() {
				$(".sub").toggleClass("cl");
			})
		})
		*/
		function insertHtmlAtCaret(html) {
			var sel, range;
			if(window.getSelection) {
				// IE9 and non-IE
				sel = window.getSelection();
				if(sel.getRangeAt && sel.rangeCount) {
					range = sel.getRangeAt(0);
					range.deleteContents();
					// Range.createContextualFragment() would be useful here but is
					// non-standard and not supported in all browsers (IE9, for one)
					var el = document.createElement("div");
					el.innerHTML = html;
					var frag = document.createDocumentFragment(),
						node, lastNode;
					while((node = el.firstChild)) {
						lastNode = frag.appendChild(node);
					}
					range.insertNode(frag);
					// Preserve the selection
					if(lastNode) {
						range = range.cloneRange();
						range.setStartAfter(lastNode);
						range.collapse(true);
						sel.removeAllRanges();
						sel.addRange(range);
					}
				}
			} else if(document.selection && document.selection.type != "Control") {
				// IE < 9
				document.selection.createRange().pasteHTML(html);
			}
		}
	</script>

	<body>
		<div id="main">
			<div id="tu">
				<p id="sup" class="sup" onclick="document.getElementById('text').focus(); insertHtmlAtCaret('<sup>1</sup>');">上标</p>
				<p id="sub" class="sub">下标</p>
			</div>
			<div id="text" contenteditable="true"></div>
		</div>
	</body>

</html>